<template>
    <div class="wlogin" :style="{minHeight:h+'px'}">
				  <vue-particles color="#dedede"></vue-particles>
						<div class="con">
								<div class="top-logo2">{{moban.platform_name}}外呼系统</div>
								<div class="center">
									<div class="img"><img src="../../../static/img/wh_loginpic.jpg"></div>
									<div class="alt">
											<div class="title">您好，请登录！</div>
											<el-input v-model="login.user" placeholder="请输入用户名"></el-input>
											<el-input v-model="login.pass" placeholder="请输入密码" show-password></el-input>
											<el-button type="danger" @click="logingo">登陆</el-button>
                                            <el-checkbox v-model="remember" style="margin-top: 20px;">记住密码</el-checkbox>
											<!-- <div class="gologin">还未开店？<router-link to="/register">注册店铺</router-link></div> -->
									</div>
								</div>
                <div style=" position: fixed; left: 0; bottom: 30px; width: 100%; text-align: center;">
                  <b style="color: #686868;font-weight: 600;font-size:14px; ">Copyright © 2019 Rocky. All rights reserved ICP 证: <a href="http://www.beian.miit.gov.cn" target="_blank">鲁ICP备14015539号-4</a></b>
                </div>
					</div>

    </div>
</template>
<script>
	import axios from 'axios'
	export default {
			data() {
				return {
					login: {
						user: '',
						pass: ''
					},
                    remember:false,
                    h:""
				}
			},
			created() {
				var that = this
				document.onkeydown = function(e){
					var ev = document.all ? window.event : e;
					if(ev.keyCode==13) {
						that.logingo()
					}
				}

                //左边导航高度
                var h = document.documentElement.clientHeight;
                this.h = h;

                if(localStorage.getItem('luser')){
                    this.login.user = localStorage.getItem('luser')
                }
                if(localStorage.getItem('lpass')){
                    this.login.pass = localStorage.getItem('lpass')
                }
                if(localStorage.getItem('luser') && localStorage.getItem('lpass')){
                    this.remember = true
                }

                localStorage.removeItem('rush')

			},
			methods: {
					logingo:function() {
            //回车键限制
            let urlname = this.$route.name
            if(urlname != 'wlogin'){
              return
            }
                        if(this.remember == true){
                            localStorage.setItem('luser',this.login.user);
                            localStorage.setItem('lpass',this.login.pass);
                        }else{
                            localStorage.removeItem('luser');
                            localStorage.removeItem('lpass');
                        }
						var that = this
						axios.post('/api/gth/shop/login', {
								name: this.login.user,
								password: this.login.pass,
							}).then(function (response) {
								if(response.data.msg.code == 0){
										//保存个人信息
										localStorage.setItem('USER',JSON.stringify(response.data.data));
										//保存店铺信息
										axios.get('/api/gth/user/shop')
											.then(response => {
												if(response.data.msg.code == 0){
													localStorage.setItem('SHOP',JSON.stringify(response.data.data));
													that.$router.push({ path: "/callsystem/taskCenter" });
												}else{
													that.$message.error(response.data.msg.info);
												}
											})
								}else{
									that.$message.error(response.data.msg.info);
								}
						})
					}
		}
	}
</script>

<style lang="scss" scoped>
	.wlogin{
		display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: url('https://file.storep.91haoka.cn/gantanhao/bj.png');
		#particles-js{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 9}
		.con{
			 margin: 0 auto; z-index: 10;     width: 1050px;
            .el-input__inner{ line-height: 36px; height: 36px;}
            .el-button--danger{ padding: 10px 30px; line-height: 14px;}
			.top-logo2{ font-size: 30px; color: #EEF7FF; margin-bottom: 20px;}
			.center{
				min-width: 1000px; background: #FFFFFF; box-shadow: 0px 0px 5px #EEF7FF; border-radius: 5px; display: flex;overflow: hidden;
				.img{
					flex-basis: 605px;height: 598px; overflow: hidden;
					img{ height: 598px; width: auto !important;}
				}
				.alt{
					  padding: 128px 60px; flex-basis: 310px;
						.title{ font-size: 22px; color: #EEF7FF;}
						.el-input{ margin-top: 40px;}
						.el-button{ width: 100%; margin-top: 40px;}
						.gologin{
							text-align: center; margin-top: 20px;
							a{ color: #2673F9}
						}
				}
			}
		}
	}
</style>
